<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-server__appResource">
		<!-- 搜索 -->
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<el-form-item>
				<el-input size="mini" v-model="dataForm.remark" :placeholder="$t('appResource.remark')" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-select size="mini" v-model="dataForm.status" clearable  :placeholder="$t('status')" >
					<el-option :key="1":label="$t('status1')":value="1"> </el-option>
					<el-option :key="0":label="$t('status0')":value="0"> </el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
			  <ren-select size="mini" v-model="dataForm.afterFileType" paramCode="after_file_type" :placeholder="$t('appResource.afterFileType')"></ren-select>
			</el-form-item>
			
			<el-form-item>
			  <el-button size="mini" @click="getDataList()">{{ $t('query') }}</el-button>
			</el-form-item>
			<el-form-item>
			  <el-button size="mini" v-if="$hasPermission('appResource:add')" type="primary" @click="addOrUpdateMethod(false,null)">{{ $t('add') }}</el-button>
			</el-form-item>
		</el-form>
	  
	  
	  <!-- 数据-表格 -->
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%;">
        <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
		<!-- <el-table-column prop="serverHost" :label="$t('serverInfo.serverHost')" sortable="custom" header-align="center" align="center"></el-table-column> -->
		<el-table-column prop="usePurpose" :label="$t('appResource.usePurpose')" header-align="center" align="center">
			
			<template slot-scope="scope">
				<el-popover trigger="hover" placement="top">
				  <p>服务器IP: {{ scope.row.serverHost }}</p>
				  <p>服务器用途: {{ scope.row.usePurpose }}</p>
				  <div slot="reference" class="name-wrapper">
					<!-- <el-tag size="medium">{{ scope.row.usePurpose }}</el-tag> -->
					{{ scope.row.usePurpose }}
				  </div>
				</el-popover>
		  </template>
		</el-table-column>
		<el-table-column prop="remark" :label="$t('appResource.remark')" header-align="center" align="center"></el-table-column>
		<el-table-column prop="basePath" :label="$t('appResource.basePath')" header-align="center" align="center"></el-table-column>
		<el-table-column  prop="basePort" :label="$t('appResource.basePort')" header-align="center" align="center" min-width="50px"></el-table-column>
		<el-table-column prop="afterFileType" :label="$t('appResource.afterFileType')" header-align="center" align="center" min-width="50px">
			<template slot-scope="scope">
				<cellsdict :paramKey="scope.row.afterFileType+''" paramType="1"  paramCode="after_file_type"  ref="cellsdict" ></cellsdict>
			 </template>
		</el-table-column>
		<el-table-column prop="runStatus" :label="$t('appResource.runStatus')" header-align="center" align="center" min-width="50px">
			<template slot-scope="scope">
				<cellsdict :paramKey="scope.row.runStatus+''" paramType="1"  paramCode="app_run_status"  ref="cellsdict" ></cellsdict>
			 </template>
		</el-table-column>
		
		<el-table-column v-if="!$hasPermission('appResource:modifyStatus')" prop="status" :label="$t('status')"  min-width="50px" header-align="center" align="center">
		  <template slot-scope="scope">
		    <el-tag type="danger" v-if="scope.row.status === 0">{{ $t('status0') }}</el-tag>
		    <el-tag v-if="scope.row.status === 1">{{ $t('status1') }}</el-tag>
		  </template>
		</el-table-column>
		<el-table-column prop="appVersion" :label="$t('appResource.appVersion')" header-align="center" align="center" min-width="50px"></el-table-column>
        <el-table-column v-if="$hasPermission('appResource:modifyStatus')"  prop="status" :label="$t('status')"  min-width="45px" header-align="center" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="changeStatus(scope.row)"
              v-model="scope.row.status === 1"
              size="mini"
              active-color="#7FAAF9"
              inactive-color="#999999"
            ></el-switch>
          </template>
        </el-table-column>
		
		<el-table-column prop="createTime" :label="$t('createTime')"  header-align="center" align="center" min-width="100px"></el-table-column>
        <el-table-column prop="updateTime" :label="$t('updateTime')"  header-align="center" align="center" min-width="100px"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="220">
          <template slot-scope="scope">
			<el-button v-if="$hasPermission('appResource:get')" type="text" size="small" @click="addOrUpdateMethod(true,scope.row.id)">{{ $t('detail') }}</el-button>
            <el-button v-if="$hasPermission('appResource:modify')" type="text" size="small" @click="addOrUpdateMethod(false,scope.row.id)">{{ $t('update') }}</el-button>
            <el-button v-if="$hasPermission('appResource:del')" type="text" size="small" @click="delHandle(scope.row.id)">{{ $t('delete') }}</el-button>
			<el-button v-if="$hasPermission('appResource:ftp')" type="text" size="small" @click="showFtpDiv(scope.row.id)">{{ $t('appResource.ftp') }}</el-button>
			<el-button v-if="$hasPermission('appResource:startOrStop') && scope.row.basePort > -1" type="text" size="small" @click="showSS(scope.row)">{{ $t('appResource.startOrStop') }}</el-button>
			<el-button v-if="$hasPermission('appResource:ftpHis')" type="text" size="small" @click="showHis(scope.row)">{{ $t('appResource.his') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
	  
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update :extendsParam="isOnlyRead" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
	  
	  <!-- 部署文件 -->
	  <upload  okFileType='jar,rar,zip,pem,war' upUrl='/common/upload/uploadFileToLocal' v-if="uploadVisible" ref="upload" @refreshDataList="getFileUrl" ></upload>
	  
	  <!-- 部署回调 -->
	  <el-dialog
	    title="部署回调"
	    :visible.sync="isShowFtpLog"
		:show-close=false
		:close-on-click-modal=false
		:close-on-press-escape=false
	    width="50%"
		
		v-loading="showFtpLogCache"
		element-loading-text="部署中,请耐心等待..."
		    element-loading-spinner="el-icon-loading"
	    >
		<el-card class="box-card">
		  <div v-for="item in ftpLogList" :key="item" class="text item">
		    {{ item }}
		  </div>
		</el-card>
	    <span slot="footer" class="dialog-footer">
	      <el-button size="mini" type="success" @click="ftpCallBack(1)">成 功</el-button>
		  <el-button size="mini" type="warning" @click="ftpCallBack(2)">异 常</el-button>
		  <el-button size="mini" type="danger" @click="ftpCallBack(0)">暂 停</el-button>
	    </span>
	  </el-dialog>
	  
	  <!-- 部署历史 -->
	  <el-dialog title="部署历史" :visible.sync="isShowHis" width="60%">
	    <el-table :data="hisList" border>
			<el-table-column prop="basePath" :label="$t('appResource.basePath')" header-align="center" align="center" min-width="150"></el-table-column>
			<el-table-column prop="fileName" show-overflow-tooltip=true :label="$t('appResource.fileName')" header-align="center" align="center" ></el-table-column>
			<el-table-column  prop="basePort" :label="$t('appResource.basePort')" header-align="center" align="center" min-width="50px"></el-table-column>
			<el-table-column prop="afterFileType" :label="$t('appResource.afterFileType')" header-align="center" align="center" min-width="50px">
				<template slot-scope="scope">
					<cellsdict :paramKey="scope.row.afterFileType+''"  paramCode="after_file_type"  ref="cellsdict" ></cellsdict>
				 </template>
			</el-table-column>
			<el-table-column prop="runStatus" :label="$t('appResource.runStatus')" header-align="center" align="center" min-width="50px">
				<template slot-scope="scope">
					<cellsdict :paramKey="scope.row.runStatus+''"  paramCode="app_run_status"  ref="cellsdict" ></cellsdict>
				 </template>
			</el-table-column>
			<el-table-column prop="appVersion" :label="$t('appResource.appVersion')" header-align="center" align="center" min-width="50px"></el-table-column>
			<el-table-column prop="createTime" :label="$t('createTime')" header-align="center" align="center" min-width="100px"></el-table-column>
			<el-table-column prop="updateTime" :label="$t('appResource.backTime')"  header-align="center" align="center" min-width="100px"></el-table-column>
			<el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="80">
				<template slot-scope="scope">
					<el-popconfirm title='确定回退此版本？' @confirm="ftpBack(scope.row)"  >
						<el-button v-if="$hasPermission('appResource:ftpBack') && scope.row.runStatus ===1" type="text" size="small"  slot="reference">{{ $t('appResource.ftpBack') }}</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
	    </el-table>
	  </el-dialog>
    </div>
  </el-card>
  
  
  
  
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './appResource-addOrUpdate'
import { setMd5 } from '@/utils'
import Upload from '../oss/oss-upload'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/pc/appResource/page',
        getDataListIsPage: true,
        deleteURL: '/pc/appResource/del',
        deleteIsBatch: false
      },
	  isShowResult: false,
	  isOnlyRead: false,
	  resultList: [],
	  
      dataForm: {
        remark: '',
        afterFileType: '',
		status: null,
      },
	  uploadVisible: false,
	  appId: null,
	  ftpLogList: [],
	  isShowFtpLog: false,
	  fileName: null,
	  showFtpLogCache: false,
	  isShowHis: false,
	  hisList: [],
	  backAppVersion: ''
    }
  },
  mounted() {

  },
  components: {
    AddOrUpdate,
	Upload
  },
  methods:{
	  changeStatus(obj){
		  let params = {
		      id: obj.id,
		      status: obj.status === 1 ? 0 : 1,
		  }
		  this.$http.post(`/pc/appResource/modifyStatus`,params).then(({ data: res }) => {
		      if(res.code === 200){
					obj.status = params.status;
		  			this.$message({type: 'success', message: '修改成功'})
		      }else{
				  this.$message.error(res.msg);
			  }
		  })
	  },
	  showFtpDiv(obj){
		  this.appId = obj
		  this.uploadVisible = true;
		  this.$nextTick(() => {
		    this.$refs.upload.init()
		  })
	  },
	  getFileUrl(upUrl){
		this.$confirm('是否即可部署:' + upUrl + '?', '提示', {
			confirmButtonText: '部署',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			//部署项目
			var p = {
				appId: this.appId,
				fileName: upUrl[0]
			}
			this.fileName = upUrl[0]
			this.isShowFtpLog = true;
			this.showFtpLogCache = true;
			this.$http.post(`/pc/appResource/ftp`,p).then(({ data: res }) => {
			    if(res.code === 200){
					 //弹框提示返回信息
					 this.ftpLogList = res.data;
					 this.showFtpLogCache = false;
			    }else{
					if( res.code === 99999 ){
						this.isShowFtpLog = false;
						this.appId = null;
						this.fileName = null;
					}
					this.showFtpLogCache = false;
					this.$message.error(res.msg);
			    }
			})
		}).catch(() => {
			this.$message({
				type: 'info',
				message: '已取消部署'
			});          
		});
	  },
	  ftpCallBack(run_status){
		  var p = {
			  appId:this.appId,
			  runStatus:run_status,
			  fileName:this.fileName,
			  backAppVersion: this.backAppVersion
		  }
		  this.$http.post(`/pc/appResource/ftpCallBack`,p).then(({ data: res }) => {
		      if(res.code === 200){
		  		this.$message({
		  			type: 'success',
		  			message: '完成确认~'
		  		});
		  		 this.appId = null;
		  		 this.isShowFtpLog = false;
		  		 this.ftpLogList = [];
				 this.fileName = null;
				 this.getDataList();
				 if( this.backAppVersion != '' ){
					 this.isShowHis = false;
				 }
		      }else{
		  		this.$message.error(res.msg);
		      }
		  })
	  },
	  showSS(ob){
		  this.$confirm('是否启停该 '+ob.remark+' APP?', '提示', {
			confirmButtonText: '启动',
			cancelButtonText: '停止',
			showClose:false,
			closeOnClickModal:false,
			closeOnHashChange:false,
			closeOnPressEscape:false,
			type: 'warning'
		  }).then(() => {
			  this.startOrStop(ob.id,true);
		  }).catch(() => {
				this.startOrStop(ob.id,false);
		  });
	  },
	  startOrStop(id,type){
		  var p = {
			  id: id,
			  isStart: type
		  }
		  this.$http.post('/pc/appResource/startOrStop',p).then(({ data: res }) => {
		      if(res.code === 200){
		  		this.$message({
		  			type: 'success',
		  			message: '完成~'
		  		});
		      }else{
		  		this.$message.error(res.msg);
		      }
		  })
	  },
	  showHis(row){
		  this.isShowHis = true
		  var p = { params:{appId:row.id} }
		  this.$http.get('/pc/appResource/ftpHis',p).then(({ data: res }) => {
		      if(res.code === 200){
		  		  this.hisList = res.data
		      }else{
		  		this.$message.error(res.msg);
		      }
		  })
	  },
	  ftpBack(row){
		  this.isShowFtpLog = true;
		  this.showFtpLogCache = true;
		  this.backAppVersion = ''
		  this.fileName = null
		  this.$http.post(`/pc/appResource/ftpBack`,{ id: row.id }).then(({ data: res }) => {
		      if(res.code === 200){
		  		 //弹框提示返回信息
		  		 this.ftpLogList = res.data;
		  		 this.showFtpLogCache = false;
				 this.appId = row.appId;
				 this.backAppVersion = row.appVersion
				 this.fileName = row.fileName
		      }else{
		  		if( res.code === 99999 || res.code === -1000){
		  			this.isShowFtpLog = false;
		  		}
		  		this.showFtpLogCache = false;
		  		this.$message.error(res.msg);
		      }
		  })
	  },
	  addOrUpdateMethod(onlyType,thisid){
		  this.isOnlyRead = onlyType
		  this.addOrUpdateHandle(thisid)
	  }
  }
}
</script>

<style>
	.box-card .text {
		 font-size: 14px;
	}
	.box-card   .item {
		padding: 6px 0;
	}
</style>
